<template>
    <div class="menuTree" >
        <li v-for="(a,a_i) in newData" :key="a_i" class="li">
            <div 
            v-if="tree_class=='dark'" 
            class="node_title" 
            :class="{root_bg_dark:a.parentId==0,child_bg_dark:a.parentId!=0}" 
            :style="'padding-left:'+padding_val+'px'"  
            @click.stop="slide(a)">

                <transition name="icon" mode="out-in">
                    <i class="bi bi-caret-right-fill icon" 
                        :style="!a.isOpen?'transform:rotate(0deg)':'transform:rotate(90deg)'" 
                        v-if="a.child.length != 0"></i>
                </transition>
                
                <span style="padding-left:20px;">
                    {{a.name}}
                </span>
            </div>
            <!-- -------------------------------------------- -->
            <div 
            v-else-if="tree_class=='light'" 
            class="node_title" 
            :class="{root_bg_light:a.parentId==0,child_bg_light:a.parentId!=0}" 
            :style="'padding-left:'+padding_val+'px'"  
            @click.stop="slide(a)">
                <i class="bi bi-caret-right-fill icon" 
                        :style="!a.isOpen?'transform:rotate(0deg)':'transform:rotate(90deg)'" 
                        v-if="a.child.length != 0"></i>
                <span style="padding-left:20px;">
                    {{a.name}}
                </span>
            </div>

            <!-- -------------------------------------------- -->
            <div 
            v-else
            class="node_title" 
            :style="a.parentId == 0?custom_style.root+';padding-left:'+padding_val+'px':custom_style.child+';padding-left:'+padding_val+'px'"  
            @click.stop="slide(a)">
                <i class="bi bi-caret-right-fill icon" 
                        :style="!a.isOpen?'transform:rotate(0deg)':'transform:rotate(90deg)'" 
                        v-if="a.child.length != 0"></i>
                <span style="padding-left:20px;">
                    {{a.name}}
                </span>
            </div>
            
            <transition name="child_tran">
                <!-- v-if="a.child.length != 0" -->
                <ul v-if="a.child.length != 0" v-show="a.isOpen" class="ul">
                    <g-menu-tree :data="a.child" :padding_val="padding_val+10" :tree_class="tree_class" :custom_style="custom_style"></g-menu-tree>
                </ul>
            </transition>
        </li>
         
    </div>
</template>
<script>
import { ref,onMounted } from "vue";
export default {
    name:'g-menu-tree',
    props:{
        data:{
            type:Array,
            default:[]
        },
        padding_val:{
            type:Number,
            default:10
        },
        tree_class:{
            type:String,
            default:''
        },
        custom_style:{
            type:Object,
            default:null
        }
    },
    setup(props){
        let newData = ref(props.data);
        let slide = (a)=>{
            if(a.child.length != 0){
                a.isOpen = !a.isOpen;
            }
        }
        return {
            newData,slide
        }
    }
}
</script>
<style>
    .root_bg_dark{
        color: white;
        background-color: var(--dark-background);
    }
    .child_bg_dark{
        color: white;
        background: rgb(87, 87, 87);
    }
    .root_bg_light{
        color: var(--default-font-color);
        /* background-color: white; */
        background-color: var(--light-background);
    }
    .child_bg_light{
        color: var(--default-font-color);
        background: #f5f5f5
    }
    .menuTree{
        width: 100%; 
    }
    .node_title{
        transition: 0.3s;
        padding: 10px 10px;
    }

    .node_title:hover{
        background-color: #cecece;
        /* color: white; */
    }
    .child_tran-enter-active{
        animation: child_tran_ani 0.3s;
    }
    .child_tran-leave-active{
        animation: child_tran_ani 0.3s reverse linear;
    }
    
    @keyframes child_tran_ani {
        0%{max-height: 0;}
        100%{max-height: 600px;}
    }
    

    .icon-enter-active{
        animation: icon_ani_enter 5s;
    }
    .icon-leave-active{
        animation: icon_ani_leave 5s ;
    }

    @keyframes icon_ani_enter {
        0%{transform: rotate(0deg);}
        100%{transform: rotate(90deg);}
    }
    @keyframes icon_ani_leave {
        0%{transform: rotate(-90deg);}
        100%{transform: rotate(0deg);}
    }



    .ul{
        margin: 0;
        overflow: hidden;
        padding-left: 0;  
    }
    .li{
        height: auto;
        list-style: none;
        cursor: pointer;
    }
    .icon{
        display: block;
        position: absolute;
        transition: 0.3s;
    }
</style>